<template>
  <div class="jj">
    <h2 style="margin-top: 150px;text-align: center">灵动创意考试系统客户端</h2>
    <el-card class="box-card">
      <div style="padding: 0 40px">
        <h3>登 录</h3>
        <el-form
          :model="loginFrom"
          :size="'large'"
          ref="ruleFormRef"
          :rules="loginFromRules"
        >
          <el-form-item prop="username">
            <el-input
              v-model.number="loginFrom.username"
              placeholder="请输入12位学号"
              prefix-icon="User"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <b style="text-align: center" v-if="!loginFrom.password">
              <el-icon><Loading /></el-icon>
              &nbsp;&nbsp; 等待获取考试凭证...</b>
            <b style="text-align: center" v-else>
              <el-icon style="color: #67C23A"><CircleCheck /></el-icon>
              &nbsp;&nbsp; <span style="letter-spacing: 1px">{{loginFrom.password}}</span>
            </b>
          </el-form-item>
        </el-form>
        <el-button
          :loading="loginLoading"
          size="large"
          type="primary"
          style="width: 100%;margin-bottom: 30px"
          @click="login"
        >立即登录</el-button>
      </div>
    </el-card>
    <!-- 弹出确认框-->
    <el-dialog v-model="dialogTableVisible" width="1200px" title="请确认您的信息">
      <el-descriptions
        :column="3"
        border
      >
        <el-descriptions-item>
          <template #label>
              学号
          </template>
          202153060000
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
              姓名
          </template>
          王子童
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
              班级
          </template>
          21级软件3班
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
              考试名称
          </template>
          灵动创意工坊考试
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            负责老师
          </template>
          长辛鹏
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            考试凭证
          </template>
          {{loginFrom.password}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            考试开始时间
          </template>
          2024-01-01 12:00:00
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            考试结束时间
          </template>
          2024-01-01 13:00:00
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            时长
          </template>
          1 小时
        </el-descriptions-item>
      </el-descriptions>
      <el-alert
        style="margin-top: 20px"
        title="注意事项"
        type="warning"
        description="每个唯一考试凭证只能使用一次！当您点击确认后，将同意以下内容：首先，唯一考试凭证将和您的学号绑定，意味着您退出后将无法再次进入考试。其次，请勿中途将答题系统退出，操作电源键、切屏、使用快捷键等危害系统正常运行的行为，这些行为都将记录在后台，严重时将做0分处理。最后，我们希望您能严格遵守以上内容，如无法遵守请立即退出，因为操作不当导致的后果自负！"
        show-icon
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="dialogTableVisible = false">
            <el-icon><Close /></el-icon>
            放弃进入系统
          </el-button>
          <el-button type="primary" @click="confirmSubmit">
            <el-icon><Check /></el-icon>
            我确认信息无误并同意以上注意事项
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginLoading: false,
      dialogTableVisible: false,
      loginFrom: {
        username: "",
        password: ""
      },
      loginFromRules: {
        username: [
          { required: true, message: "请输入学号", trigger: "blur" },
        ]
      }
    }
  },
  methods: {
    login() {
      this.$refs["ruleFormRef"].validate((valid) => {
        if (valid) {
          console.log(this.loginFrom.username)
          if ((this.loginFrom.username + '').length !== 12){
            this.$message.warning("请输入长度为12位的学号")
          }else{
            this.loginLoading = true;
            // 延时3秒
            setTimeout(() => {
              this.loginFrom.password = "528E2B17-2C82-B564-FF4F-D9651DD9ECA2"
              this.$message.success("唯一凭证获取成功");
              this.$nextTick(() => {
                this.dialogTableVisible = true;
                this.loginLoading = false;
              })
            }, 1000);
          }
        } else {
          return false;
        }
      });
    },
    confirmSubmit(){
      this.$message.success("登录成功")
      this.$router.push("/confirm")
    }
  }
}
</script>

<style>
.jj {
  height: calc(100vh - 158px);
  background: url("../../assets/bg.png") no-repeat;
  /*背景自适应*/
  background-size: cover;
}
.box-card{
  width: 500px;
  margin: 50px auto 0;
}
</style>
